<template>
  <div class="movie">
    <!-- 标签 -->
    <div class="radioGroup">
      <!-- 类型标签 -->
      <div class="type">
        <p>类型：</p>
        <ul>
          <li
            v-for="(item, index) in typeList"
            :key="index"
            @click="selectType(item)"
            class="typeLink"
            :class="Type === item ? 'active' : ''"
          >
          
            {{ item }}
          </li>
        </ul>
      </div>
      <!-- 地区标签 -->
      <div class="area">
        <p>地区：</p>
        <ul>
          <li
            v-for="(item, index) in areaList"
            :key="index"
            :class="Area === item ? 'active' : ''"
            @click="selectArea(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 电影列表 -->
    <div class="movieList">
      <div class="movie" v-for="(item, index) in movieList" :key="index" @click="toDetail(item)">
        <img :src="item.cover" :alt="item.name" />
        <div class="movie_name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { MovieList ,MovieListByTypeAndArea} from "@/api/movie";
export default {
  data() {
    return {
      Type: "全部",//默认类型
      Area: "全部",//默认地区
      // 类型列表
      typeList: [
        "全部",
        "家庭",
        "惊悚",
        "科幻",
        "爱情",
        "动作",
        "喜剧",
        "恐怖",
        "悬疑",
        "犯罪",
        "冒险",
        "战争",
        "历史",
        "武侠",
        "传记",
        "古装",
        "其他",
      ],
      // 地区列表
      areaList: [
        "全部",
        "内地",
        "香港",
        "台湾",
        "美国",
        "韩国",
        "日本",
        "泰国",
        "印度",
        "法国",
        "英国",
        "德国",
        "其他",
      ],
      // 电影列表
      movieList: [
        // {
        //   name: "刺杀小说家",
        //   imgAddress: require("@/assets/movie/list/刺杀小说家.jpg"),
        //   wants: 123,
        //   playtime: "2021 - 03 - 05",
        //   hot: 130,
        // },
        // {
        //   name: "21座桥",
        //   imgAddress: require("@/assets/movie/list/21座桥.jpg"),
        //   wants: 323,
        //   playtime: "2021 - 06 - 15",
        //   hot: 120,
        // },
        // {
        //   name: "人潮汹涌",
        //   imgAddress: require("@/assets/movie/list/人潮汹涌.jpg"),
        //   wants: 1023,
        //   playtime: "2021 - 12 - 25",
        //   hot: 999,
        // },
        // {
        //   name: "你好李焕英",
        //   imgAddress: require("@/assets/movie/list/你好李焕英.jpg"),
        //   wants: 1323,
        //   playtime: "2021 - 07 - 03",
        //   hot: 666,
        // },
        // {
        //   name: "狮子王",
        //   imgAddress: require("@/assets/movie/list/狮子王.jpg"),
        //   wants: 1233,
        //   playtime: "2021 - 08 - 16",
        //   hot: 233,
        // },
        // {
        //   name: "唐人街探案",
        //   imgAddress: require("@/assets/movie/list/唐人街探案.jpg"),
        //   wants: 3123,
        //   playtime: "2021 - 04 - 30",
        //   hot: 886,
        // },
        // {
        //   name: "小小的愿望",
        //   imgAddress: require("@/assets/movie/list/小小的愿望.jpg"),
        //   wants: 1223,
        //   playtime: "2021 - 01 - 28",
        //   hot: 189,
        // },
        // {
        //   name: "受益人",
        //   imgAddress: require("@/assets/movie/list/受益人.jpg"),
        //   wants: 123,
        //   playtime: "2021 - 09 - 07",
        //   hot: 65,
        // },
        // {
        //   name: "哥斯拉",
        //   imgAddress: require("@/assets/movie/list/哥斯拉.jpg"),
        //   wants: 5123,
        //   playtime: "2021 - 10 - 10",
        //   hot: 88,
        // },
      ],
    };
  },
  mounted(){
    this.getMovieList();
  },  
  methods: {
    // 类型选择
    selectType(value) {
      this.Type = value;
      this.$router.push('/movie?type='+this.Type+'&area='+this.Area)
      this.getMovieList();
    },
    // 地区选择
    selectArea(value) {
      this.Area = value;
      this.$router.push('/movie?type='+this.Type+'&area='+this.Area)
      this.getMovieList();
    },
    // 电影跳转
    toDetail(item) {
      localStorage.setItem("fid",item.id);
      this.$router.push("/movie_detail?fid=" + item.id);
    },
    // 获取电影列表
    getMovieList() {
      MovieListByTypeAndArea(this.Type,this.Area).then((res) => {
        // console.log(this.Type);
        // console.log(this.Area);
        // console.log(res);
        this.movieList = res.data;
      });
    },

  },
};
</script>

<style lang="scss" scoped>
.movie {
  .radioGroup {
    width: 1000px;
    padding: 0 20px;
    border: 1px lightgrey solid;
    font-size: 14px;
    color: grey;
    margin: 40px auto;

    .type {
      margin-top: 10px;
      margin-bottom: 20px;
      p {
        float: left;
        padding-top: 4px;
      }
      ul {
        list-style: none;
        li {
          line-height: 1;
          border-radius: 20px;
          display: inline-block;
          padding: 7px 15px;
          font-size: 13px;
          text-align: center;
          font-weight: 500;
          color: black;
        }
        li:hover {
          cursor: pointer;
        }
        .active {
          color: white;
          background-color: red;
        }
      }
    }
    .area {
      margin-top: 20px;
      margin-bottom: 10px;
      p {
        float: left;
        padding-top: 4px;
      }
      ul {
        list-style: none;
        li {
          line-height: 1;
          border-radius: 20px;
          display: inline-block;
          padding: 7px 15px;
          font-size: 13px;
          text-align: center;
          font-weight: 500;
          color: black;
        }
        li:hover {
          cursor: pointer;
        }
        .active {
          color: white;
          background-color: red;
        }
      }
    }
  }
  .movieList {
    width: 1300px;
    height: auto;
    display: flex;
    flex-flow: row wrap;
    align-content: space-between;
    // justify-content: space-between;
    padding: 30px 25px;
    margin: 0 auto;
    .movie {
      width: 300px;
      height: 400px;
      position: relative;
      margin: 0 2.5px;
      margin-bottom: 15px;
      padding: 5px;
      border: 5px black solid;
      img {
        width: 300px;
        height: 370px;
      }
      .movie_name {
        //   padding-top: 10px;
        text-align: center;
        font-size: 22px;
      }
    }
    .movie:hover{
      cursor: pointer;
    }
  }
}
</style>